<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{.movieInfo.MovieName}}</title>
    <link rel="stylesheet" href="/static/plus/bootstrap-4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/plus/raty-3.0.0/lib/jquery.raty.css">
    <style>
        .content {
            margin: 50px auto auto;
            width: 80%;
        }
        .media-body .title {
            font-size: 20px;
            color: #1b1e21;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .media-body {
            width: calc(100% - 170px);
        }
        .media-body .movie-item {
            font-family: 楷体, serif;
            font-size: 18px;
            margin-top: 10px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            width: 95%;
        }
        .synopsis {
            margin: 30px 20px;
            font-family: 幼圆, serif;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="media">
        <div class="media-left">
            <a href="#">
                <img  class="img-rounded mr-5"  src="{{.movieInfo.MoviePic}}" alt="{{.movieInfo.MovieName}}">
            </a>
        </div>
        <div class="media-body">
            <div class="title">{{.movieInfo.MovieName}}</div>
            <div><span class="star" data-score="{{.movieInfo.MovieGrade}}"></span> <span style="color: #FF6633;">{{.movieInfo.MovieGrade}}</span></div>
            {{if .movieInfo.MovieDirector}}
                <div class="movie-item">导演：{{.movieInfo.MovieDirector}}</div>
            {{end}}
            {{if .movieInfo.MovieWriter}}
                <div class="movie-item">编剧：{{.movieInfo.MovieWriter}}</div>
            {{end}}
            {{if .movieInfo.MovieOnTime}}
                <div class="movie-item">上映时间：{{.movieInfo.MovieOnTime}}</div>
            {{end}}
            {{if .movieInfo.MovieCountry}}
                <div class="movie-item">国家：{{.movieInfo.MovieCountry}}</div>
            {{end}}
            {{if .movieInfo.MovieLanguage}}
                <div class="movie-item">语言：{{.movieInfo.MovieLanguage}}</div>
            {{end}}
            {{if .movieInfo.MovieMainCharacter}}
                <div class="movie-item">主演：{{.movieInfo.MovieMainCharacter}}</div>
            {{end}}
            {{if .movieInfo.MovieType}}
                <div class="movie-item">类型：{{.movieInfo.MovieType}}</div>
            {{end}}
            {{if .movieInfo.MovieSpan}}
                <div class="movie-item">时长：{{.movieInfo.MovieSpan}}</div>
            {{end}}

        </div>
    </div>
    {{if .movieInfo.MovieSynopsis}}
        <div class="synopsis">简介：{{.movieInfo.MovieSynopsis}}</div>
    {{end}}
</div>
<script src="/static/js/jquery-3.5.1.min.js"></script>
<script src="/static/plus/raty-3.0.0/lib/jquery.raty.js"></script>
<script>
    $(".star").raty({number: 10, readOnly: true, half: true, round: { down: .39, full: .6, up: .89 }});
</script>
</body>
</html>